<template>
	<view class="container">
		<view class="tui-order">
			<view class="tui-order-box">
				<view v-if="info['info']['deposit_type'] == 1" class="tui-order-name">提现到余额</view>
				<view v-elseif="info['info']['deposit_type'] == 2" class="tui-order-name">提现到银行卡：{{info['info']['cardholder']}}</view>
				<view v-elseif="info['info']['deposit_type'] == 3" class="tui-order-name">划拔到代理商系统</view>
				
				<view class="tui-order-money">{{formatPrice(info['info']['amount'] + info['info']['fee'])}}元</view>
				
				<view class="tui-order-msg" v-if="info['info']['status'] == 2">提现失败，如有疑问可联系客服人员</view>
				<view class="tui-order-status" v-else>{{info['statusList'][info['info']['status']]['title']}}</view>									
				
			</view>

		</view>
		<view class="tui-order-tracking">
			
			<view class="timeaxis">
				<view class="timeaxis-left">
					提现进度
				</view>
				<view class="timeaxis-right">
					
					<tui-time-axis>
						<tui-timeaxis-item bgcolor="none">
							<template v-slot:node>
								<view class="tui-node tui-bg-primary">
									<tui-icon name="check" color="#fff" :size="14" :bold="true"></tui-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="tui-order-title">提交提现申请 <text class="textSmall">{{formatDate(info['info']['create_time'])}}</text></view>
									<view class="tui-order-desc"></view>
									<!-- <view class="tui-order-time tui-gray">2019-05-01 18:48:26</view> -->
								</view>
							</template>
						</tui-timeaxis-item>
					</tui-time-axis>				
					<tui-time-axis :class="info['info']['status'] == 4 || info['info']['status'] == 1? '': 'noneBorder' ">
						<tui-timeaxis-item bgcolor="none">
							<template v-slot:node>
								<view class="tui-node" :class="info['info']['status'] == 4 || info['info']['status'] == 1? 'tui-bg-primary': '' ">
									<tui-icon name="check" color="#fff" :size="14" :bold="true"></tui-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="tui-order-title " :class="info['info']['status'] == 4 || info['info']['status'] == 1? '': 'tui-gray' ">系统自动审核</view>
									<view class="tui-order-desc"></view>
									<!-- <view class="tui-order-time tui-gray">2019-05-01 18:48:26</view> -->
								</view>
							</template>
						</tui-timeaxis-item>
					</tui-time-axis>			
				<!-- noneBorder noneBorderLast    class="noneBorder noneBorderLast" -->
				<!-- :class="info['info']['status'] == 1? '': 'noneBorderLast' " -->
					<tui-time-axis class="noneBorderLast " :class="info['info']['status'] == 1? '': 'noneBorder' "> 
						<tui-timeaxis-item bgcolor="none" >
							<template v-slot:node>
								<view class="tui-node " :class="info['info']['status'] == 1? 'tui-bg-primary': '' ">
									<tui-icon name="check" color="#fff" :size="14" :bold="true"></tui-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="tui-order-title " :class="info['info']['status'] == 1? 'tui-blue': '' ">到帐成功 <text class="textSmall" v-if="info['info']['status'] == 1">{{formatDate(info['info']['deposit_time'])}}</text></view>
									<view class="tui-order-desc"></view>
								</view>
							</template>
						</tui-timeaxis-item>
					</tui-time-axis>
					
					
					
				</view>
			</view>
			<view class="orderList">
				<view class="orderList-left">
					<text class="orderList-left-text">提现单号</text>
				</view>
				<view class="orderList-right">
					{{info['info']['deposit_sn']}}
				</view>
			</view>
			
			<view class="orderList">
				<view class="orderList-left">
					<text class="orderList-left-text">交易流水</text>
				</view>
				<view class="orderList-right">
					{{info['info']['up_sn']}}
				</view>
			</view>
		</view>
		<view class="tui-btn-box">
			<button class="btn-primary" hover-class="btn-hover" formType="submit" type="primary" @tap="detail('./wallet')">返回我的帐户</button>
		</view>
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
		
	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	
	import tuiIcon from "@/components/icon/icon"
	import tuiTimeAxis from "@/components/time-axis/time-axis"
	import tuiTimeaxisItem from "@/components/timeaxis-item/timeaxis-item"
	import tuiToast from "@/components/extend/toast/toast"
	
	export default {
		components: {
			tuiIcon,
			tuiTimeAxis,
			tuiTimeaxisItem,
			tuiToast
		},
		data() {
			return {
				parm: {},
				info: {info:{amount:0,cardholder:''}}
			}
		},
		onLoad: function(option){
			this.parm = option;
			// this.parm = {deposit_id: "18",cardholder:''};
			this.loadData();
		},
		methods: {
			formatDate: function (timestamp) {
				return dataTime.formatDate('m-d h:i:s',timestamp);
			},
			loadData: function(){
				let that = this;
				that.tui.request('user/depositInfo', this.parm).then((res) => {
					if(res.code == '0000'){
						this.info = res;
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
			},
			formatPrice: function(fee){
				return this.tui.centsToYuan(fee).toFixed(2);
			},
			detail: function(url,type){
				if(type == 1){
					uni.switchTab({
						url: url
					});
					return false
				}
				uni.redirectTo({
				   url: url,
				});
			},
		}
	}
</script>

<style>
	.tui-btn-box {
		width: 100%;	
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		padding-bottom: 50px;
		box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
		position: fixed;
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px !important;
	}
	// 列表
	.orderList{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 30rpx 0rpx;
		border-top: 1rpx solid #f1f1f1;
		
	}
	.orderList-left{
		font-size: 30rpx;
		min-width: 180rpx;
		color: #999999 !important;
	}
	.orderList-left-text{
		padding-left: 10rpx;
	}
	.orderList-right{
	
		font-size: 30rpx;
	}
	// 列表
	// 时间轴
	.timeaxis{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;		
	}
	.timeaxis-left{
		font-size: 30rpx;
		width: 30%;
		vertical-align:text-top;
		color: #a7a7a7;
	}

	.timeaxis-right{
		color: #0a8fe2 !important;
		font-size: 30rpx;
		width: 70%;
	}	
	.tui-time-axis::before{
		border-left: 7rpx solid #0A8FE2 !important;
	}
	.tui-bg-primary {
		background: #0A8FE2 !important;
	}
	.noneBorder .tui-time-axis::before{
		border-left: 7rpx solid #999999 !important;
	}
	.noneBorderLast .tui-time-axis::before{
		border-left: 0rpx solid #fff !important;
	}
	.noneBorderLast .tui-time-axis{
		color: #999999 !important; 
	}
	.textSmall{
		font-size: 25rpx;
		color: #999999 !important;
		float: right;
	}
	// 时间轴
	.container{
		background: #FFFFFF;
	}
	.tui-order {
		padding: 30upx;
		box-sizing: border-box;
		/* background: #fff; */
		text-align: center;
		
	}
	.tui-order-box{
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f3f3f3;
	}

	.tui-node {
		background: #ddd;
		height: 44upx;
		width: 44upx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		padding-top: 0;
	}

	.tui-node-small {
		height: 16upx !important;
		width: 16upx !important;
	}


	.tui-order-tracking {
		padding: 0upx 30upx 20upx 40upx;
		background: #fff;
		margin-top: 20upx;
		box-sizing: border-box;
	}

	.tui-order-name {
		color: #999999;
		font-weight: 400;
		font-size: 28upx;
		font-family: "microsoft yahei";
		line-height: 50rpx;
	}
	.tui-order-money{
		margin: 30rpx auto;
		font-size: 50rpx;
		color: #000;
		font-weight: 500;
	}
	.tui-order-msg{
		font-size: 30rpx;
		color: red;
		margin-bottom: 25rpx;
		font-weight: 400;
	}
	.tui-order-status{
		font-size: 30rpx;
		color: #0A8FE2;
		margin-bottom: 25rpx;
		font-weight: 400;
	}
	
	.tui-order-desc {
		font-size: 28upx;
		color: #333;
		padding: 12upx 0;
		height: 60rpx;
	}

	.tui-ptop {
		display: flex;
		justify-content: flex-start;
		line-height: 28upx;
	}
	.tui-gray {
		color: #848484 !important;
	}
	.tui-blue{
		color: #0A8FE2 !important;
	}
	.tui-light-gray {
		color: #888 !important;
	}
	.tui-timeaxis-item{
		margin-bottom: 0px !important;

	}

/* 
	.tui-primary {
		color: #5677fc;
	} */
</style>
